<template>
  <el-dialog
    :title="'选择销售代表'"
    append-to-body
    :close-on-click-modal="false"
    @close="closeDialog()"
    :visible="visible"
    width="1200px"
  >
    <div class="mod-config">
      <basic-container>
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="登录手机号" prop="loginAccount">
            <el-input
              v-model.trim="queryParams.loginAccount"
              placeholder="请输入登录手机号"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getDataList"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <div class="avue-crud">
          <el-table ref="tableMain" 
                    :data="dataList" 
                    border
                    :row-key="getRowKey" 
                    v-loading="dataListLoading" 
                    @select="simpleCheck"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>
            <el-table-column
              type="index"
              header-align="center"
              :index="indexMethod"
              align="center"
              label="编号"
            >
            </el-table-column>
            <el-table-column
              prop="loginAccount"
              header-align="center"
              align="center"
              label="登录手机号"
            >
            </el-table-column>
            <el-table-column
              prop="nickName"
              header-align="center"
              align="center"
              label="昵称"
            >
            </el-table-column>
            <el-table-column
              prop="realName"
              header-align="center"
              align="center"
              label="真实姓名"
            >
            </el-table-column>
            <el-table-column
              prop="invitedCode"
              header-align="center"
              align="center"
              label="邀请码">
            </el-table-column>
            
            <el-table-column
              prop="createTime"
              header-align="center"
              align="center"
              label="注册时间"
            >
            </el-table-column>
          </el-table>
        </div>

        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="queryParams.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="queryParams.pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </basic-container>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
        >确定</el-button
      >
    </span>

  </el-dialog>
</template>

<script>
import { fetchList } from "@/api/shop_user/user";
import {shopUserTypeEnum} from '@/const/const';


export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return{
      canSubmit:false,
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        loginAccount:'',
        shopUserType:shopUserTypeEnum.sales
      },
      dataList: [],
      totalPage: 0,
      dataListLoading: false,
      currentUser:null
    }
  },
  methods:{

    /**
     * 初始化
     */
    init(){
      this.canSubmit = true
      this.getDataList()
    },

    getRowKey(row) {
      return row.id 
    },
    
    /**
     * 获取数据列表
     */
    getDataList() {
      this.dataListLoading = true;
      fetchList(
        Object.assign({
          shopUserType: this.queryParams.shopUserType,
          loginAccount: this.queryParams.loginAccount,
          current: this.queryParams.pageIndex,
          size: this.queryParams.pageSize
        })
      ).then((response) => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
      });
      this.dataListLoading = false;
    },

    /**
     * 每页数
     */
    sizeChangeHandle(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageIndex = 1;
      this.getDataList();
    },

    /**
     * 当前页
     */
    currentChangeHandle(val) {
      this.queryParams.pageIndex = val;
      this.getDataList();
    },

    /**
     * 重置
     */
    resetQuery() {
      this.queryParams.pageIndex = 1;
      this.queryParams.pageSize = 10;
      this.resetForm("queryForm");
      this.getDataList();
    },

    indexMethod(index) {
      return (
        (this.queryParams.pageIndex - 1) * this.queryParams.pageSize + index + 1
      );
    },

    //重置表单
    closeDialog() {
      this.$emit('update:visible', false)
    },

    /**
     * 选择销售代表
     */
    simpleCheck(selection, row){
      this.$refs.tableMain.clearSelection()
      if (selection.length === 0) { 
        // 判断selection是否有值存在
        // 反选的时候清空
        this.currentUser = null
        return
      }
      if (row) {
        this.currentUser = row
        this.$refs.tableMain.toggleRowSelection(row, true)
      }
    },

    handleSelectionChange(){

    },

    /**
     * 选择
     */
    dataFormSubmit(){
      if(!this.currentUser){
        this.$message.error("请选择销售代表")
        return
      }
      this.$emit('selectUserSalesResult', this.currentUser);
      this.closeDialog()
    }
  }
}
</script>



<style scoped lang="scss">
  ::v-deep .el-dialog__body {
    padding: 0;
  }
  ::v-deep .dialogForm .form-outer {
    padding: 0 20px;
    .form-inner {
      padding: 0;
    }
  }

  ::v-deep .el-table__header-wrapper  .el-checkbox{
    display:none
  }
</style>